<template>
	<div class="container">
		<div id="popup-box" class="ol-popup">
			<div id="popup-content"></div>
		</div>
	</div>
</template>
<script  lang="ts">
	import 'ol/ol.css'
	import Overlay from 'ol/Overlay';
	
	import Feature from 'ol/Feature'
	import {Point} from "ol/geom"
    import {Component, Vue} from 'vue-property-decorator'
    import {createLayer,createSource,createStyle,pointImageStyle} from '@/utils/map'

@Component({
  components: {}
})
export default class PlaceCard extends Vue {
    overlayer!:any;
    locationlayer!:any;
    targetmap!:any;


    cityPoint(data:any) {
        if(!this.locationlayer){
            console.error('没有创建位置图层');
            return;
        }
        const vsource = this.locationlayer.getSource();
        vsource.clear();
        let features:any = [];
        for (var i = 0; i < data.length; i++) {

            // const posititon =gcj02ToWgs84(data[i].location.lng,data[i].location.lat);
            // data[i].position = posititon;
            let feature = new Feature({
                geometry: new Point([data[i].location.lng,data[i].location.lat]),
                citydata: data[i],
            })
            feature.setStyle(pointImageStyle('location'))
            features.push(feature)
        }
        vsource.addFeatures(features)
    }
    

    hoverPoint(map) {
		// 设置浮层
        this.createLayer(map);
        this.targetmap = map;
        const box:any = document.getElementById('popup-box');
        this.overlayer = new Overlay({
            element: box,
            autoPan: {
                animation: {
                    duration: 250,
                },
            }
        });
        map.addOverlay(this.overlayer);
        // 显示内容
        const content:any = document.getElementById('popup-content');
        let _that = this;
        map.on('pointermove', (e) => {
            if (e.dragging) {
                return;
            }
            let feature = map.forEachFeatureAtPixel(
                e.pixel,
                (feature, layer) => {
                    return feature
                }
            )
            if (feature) {
                let cityInfo = feature.get('citydata')
                if(cityInfo && cityInfo.name){
                    let name = cityInfo.name;
                    let address = cityInfo.address || '';
                    let telephone = cityInfo.telephone || '';
                    content.innerHTML = `<h3>${name}</h3><div><p>${address}</p><div><p>${telephone}</p></div>`;
                    _that.overlayer.setPosition(e.coordinate);
                }
            } else {
                _that.overlayer.setPosition(undefined);
            }
        });
    }
    createLayer(map){
        if(!this.locationlayer){
            
            this.locationlayer = createLayer(createSource(),createStyle("orange","darkgreen","red"))
            map.addLayer(this.locationlayer)
        }
    }
}
	
</script>
<style scoped>
	.container {
		width: 840px;
		height: 590px;
		margin: 50px auto;
		border: 1px solid #42B983;
	}

	#vue-openlayers {
		width: 800px;
		height: 470px;
		margin: 0 auto;
		border: 1px solid #42B983;
		position: relative;
	}

	.ol-popup {
		position: absolute;
		background-color: rgba(28, 181, 51, 0.8);
		padding: 5px;
		border-radius: 5px;
		border: 1px solid #cccccc;
		bottom: 12px;
		left: -50px;
		color: #FFFFFF;
		min-width: 200px;
        z-index: 100000000;
	}

	.ol-popup:after,
	.ol-popup:before {
		top: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.ol-popup:after {
		border-top-color: rgba(255, 0, 0, 0.8);
		border-width: 10px;
		left: 48px;
		margin-left: -10px;
	}

	.ol-popup:before {
		border-top-color: #cccccc;
		border-width: 11px;
		left: 48px;
		margin-left: -11px;
	}

</style>


